<!DOCTYPE html>
<html>
<head>
    <title>Concentric Spheres Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="500" style="border:1px solid #d3d3d3;"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    const cx = canvas.width / 2;
    const cy = canvas.height / 2;
    const r_a = 80;
    const r_b = 180;
    
    // --- General Styles ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Helper function to draw a line with an arrowhead ---
    function drawArrow(x1, y1, x2, y2, headLength = 10) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        
        // Draw the line shaft
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();

        // Draw the arrowhead
        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headLength * Math.cos(angle - Math.PI / 6), y2 - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headLength * Math.cos(angle + Math.PI / 6), y2 - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // --- 1. Draw the Annulus (shaded region) ---
    // Draw the outer circle and fill it with grey
    ctx.beginPath();
    ctx.arc(cx, cy, r_b, 0, 2 * Math.PI);
    ctx.fillStyle = '#CCCCCC';
    ctx.fill();
    ctx.stroke();

    // Draw the inner circle (as a white hole)
    ctx.beginPath();
    ctx.arc(cx, cy, r_a, 0, 2 * Math.PI);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.stroke();

    // --- 2. Draw the radial lines and labels ---
    const angleB = -55 * Math.PI / 180; // Angle for radius b

    // Draw the triangular shape from the center.
    // This consists of the two radial lines.
    // First, draw a line from the center to the inner circle along the path of radius 'b'
    // to make the vertex on the inner circle clear.
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + r_a, cy);
    ctx.moveTo(cx, cy);
    ctx.lineTo(cx + r_a * Math.cos(angleB), cy + r_a * Math.sin(angleB));
    ctx.stroke();

    // Draw the full arrow for radius 'a'
    drawArrow(cx, cy, cx + r_a, cy);
    
    // Draw the full arrow for radius 'b'
    drawArrow(cx, cy, cx + r_b * Math.cos(angleB), cy + r_b * Math.sin(angleB));

    // --- 3. Add text labels ---
    // Label 'a'
    ctx.fillStyle = 'black';
    ctx.font = 'italic 24px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('a', cx + r_a / 2, cy - 8);

    // Label 'b'
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText('b', cx + r_b * 0.55 * Math.cos(angleB) + 10, cy + r_b * 0.55 * Math.sin(angleB) + 10);
    
    // Label 'σ(r)'
    ctx.font = 'italic bold 28px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const sigmaR_radius = (r_a + r_b) / 2;
    const sigmaR_angle = 200 * Math.PI / 180;
    ctx.fillText('σ(r)', cx + sigmaR_radius * Math.cos(sigmaR_angle), cy + sigmaR_radius * Math.sin(sigmaR_angle));

</script>
</body>
</html>